<template>
	<div class="home-box" ref="homeBox">
		<div class="main">
			<!-- 2box -->
			<div class="all">
				<!-- left -->
				<div class="left">
					<!-- data -->
					<div class="header-title">
						<!-- fl -->
						<div class="header-icon">
							<div class="img">
								<img :src="ImageHeader" alt="">
							</div>
							<div class="tit">
								<div class="titA">
									<span style="font-size: 16px;font-weight:300;margin-left: 12px;">{{ dateDay + '好！' }}</span>
									<span style="font-size: 16px;font-weight:300;">系统管理员</span>
								</div>
								<div class="titB">
									<span style="font-size: 12px;font-weight:400;color: #888888;margin-left: 12px;">北海有鱼，其名为鲲。鲲之大，一锅装不下。</span>
								</div>
							</div>
						</div>
						<div class="main-header-left">
							<!-- title -->
							<div class="main-header-title">
								<!-- <i class="el-icon-help" style="font-size: 36px;"></i> -->
								<span style="display: inline-block;margin: 8px;font-size:14px;font-weight: bold;">我的项目</span>
								<div class="perjects">
									<li v-for="(v,i) in prejects" :key="i">
										<p>
											<i :class="v.icon" style="font-size: 28px;"></i>
											<span style="font-size: 12px;">{{ v.title }}</span>
										</p>
										<p><span style="font-size: 12px;">{{ v.title }}</span></p>
									</li>
								</div>
							</div>
						</div>
					</div>
					
					</div>
					<!-- right -->
					<div class="right">
						<!-- 便捷操作 -->
						<div class="allRight">
							<div class="ll">
								<span style="font-size: 14px;font-weight: bold;">快捷操作</span>
								<div class="useModel">
									<li v-for="(v,i) in useModel" :key="i">
										<i :class="v.icon" style="font-size: 28px;"></i>
										<span style="font-size: 12px;">{{ v.title }}</span>
									</li>
								</div>
							</div>
						</div>
						<!-- img -->
						<div class="img">
							<img :src="imgUrl" alt="">
						</div>
						<!-- notice -->
						<div class="notice">
							<div class="noticeA">
								<span style="font-size: 14px;font-weight: bold;">公告</span>
								<el-link type="primary">更多</el-link>
							</div>
							<div class="noticeB">
								 <el-tag size="small">活动</el-tag>
								 <span>{{ intruce }}</span>
							</div>
						</div>
						<!-- 帮助文档 -->
						<div class="helpDocument">
							<div class="helpDocumentA">
								<span style="font-size: 14px;font-weight: bold;">帮助文档</span>
								<el-link type="primary">更多</el-link>
							</div>
							<div class="helpDocumentB">
								<li v-for="(v,i) in useModel" :key="i">
									<span style="font-size: 12px;">{{ v.title }}</span>
								</li>
							</div>
						</div>
					</div>
			
				
				
			</div>
		</div>
			

	</div>
</template>

<script>
	// selfs / sons
	import Header from "@/views/layout/header.vue";
	import * as echarts from "echarts";
	export default {
		components: {
			Header,
		},
		data() {
			return {
				like: true,
				value1: 66.88,
				newPersons: 1314,
				dateDay:'上午',
				title: "增长人数",
				linehart: {},
				userinfo:[],
				ImageHeader:'https://img2.baidu.com/it/u=1615503299,3525541790&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
				intruce:'诚邀!使用公司/组织/项目登记。',
				imgUrl:'https://img1.baidu.com/it/u=2148492914,3106842862&fm=253&fmt=auto&app=120&f=JPEG?w=855&h=500',
				card:[
					{ id:1,tit:'访问次数',span:4,data:'48688',icon:'el-icon-info',type:'typeA'},{ id:2,tit:'增长人数',span:4,shadow:'hover',data:'2688',icon:'el-icon-dangan',type:'typeB'},
					{ id:3,tit:'独立IP',span:4,data:'12388',icon:'el-icon-jglb',type:'typeC'},{ id:4,tit:'收入比例',span:4,data:'12388',icon:'el-icon-position',type:'typeD'}
				],
				prejects:[
					{title:'ContiNew Admin',icon:'el-icon-user'},{title:'九阵云诊所',icon:'el-icon-yigongti'},{title:'ContiNew Admin UI',icon:'el-icon-jglb'},
					{title:'ContiNew Starter',icon:'el-icon-closeFiles'},{title:'ContiNew Admin UI Icon',icon:'el-icon-sort'},{title:'ContiNew Admin Cloud',icon:'el-icon-time'}
				],
				useModel:[
					{title:'用户管理',icon:'el-icon-user'},{title:'角色管理',icon:'el-icon-yigongti'},{title:'菜单管理',icon:'el-icon-jglb'},
					{title:'文件管理',icon:'el-icon-closeFiles'},{title:'报表管理',icon:'el-icon-sort'},{title:'系统日志',icon:'el-icon-time'}
				],
				cards:[
					{ id:1,tit:'注册中心',span:2,shadow:'hover',icon:'el-icon-info'},{ id:2,tit:'工作台',span:2,shadow:'hover',icon:'el-icon-money'},
					{ id:3,tit:'标准化管理',span:2,shadow:'hover',icon:'el-icon-shopping-cart-1'},{ id:4,tit:'机构管理',span:2,shadow:'hover',icon:'el-icon-files'},
					{ id:5,tit:'平台管理',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:6,tit:'企业服务总线',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:7,tit:'主索引管理',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:8,tit:'CDA文档管理',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:9,tit:'患者360试图',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:10,tit:'消息中心',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:11,tit:'监控中心',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:12,tit:'日程中心',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:13,tit:'推送中心',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:14,tit:'日志中心',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:15,tit:'任务调度中心',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:16,tit:'人卫知识库',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:17,tit:'区域影像中心',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:18,tit:'就诊记录共享中心',span:2,shadow:'hover',icon:'el-icon-truck'},
					{ id:19,tit:'报表管理',span:2,shadow:'hover',icon:'el-icon-medal-1'},{ id:20,tit:'就诊挂号服务',span:2,shadow:'hover',icon:'el-icon-truck'},
				],
				linehartOptions: {
				  title: {
				    text: "数据统计",
				    left: 20,
				  },
				  tooltip: {
				    trigger: "axis",
				  },
				  legend: {
				    data: ["订单", "销售额", "注册人数", "管理员人数"],
				  },
				  grid: {
				    left: "3%",
				    right: "4%",
				    bottom: "3%",
				    containLabel: true,
				  },
				
				  xAxis: {
				    type: "category",
				    boundaryGap: false,
				    data: [
				      "2025/1/10",
				      "2025/2/11",
				      "2025/3/12",
				      "2025/4/13",
				      "2025/5/14",
				      "2025/1/15",
				      "2025/1/16",
				    ],
				  },
				  yAxis: {
				    type: "value",
				  },
				  series: [
				    {
				      name: "管理员人数",
				      type: "line",
				      stack: "Total",
				      data: [520, 132, 101, 134, 90, 230, 210],
				    },
				    {
				      name: "销售额",
				      type: "line",
				      stack: "Total",
				      data: [220, 182, 191, 234, 290, 330, 310],
				    },
				    {
				      name: "注册人数",
				      type: "line",
				      stack: "Total",
				      data: [150, 232, 201, 154, 190, 330, 410],
				    },
				    {
				      name: "订单",
				      type: "line",
				      stack: "Total",
				      data: [320, 332, 301, 334, 390, 330, 320],
				    },
				  ],
				 },
			};
		},
		mounted() {
			//监听窗口改变，重置图表大小
			window.addEventListener("resize", this.resizeListener);

		},
		beforeDestroy() {
		  //移除窗口大小适配的监听
		  window.removeEventListener("resize", this.resizeListener);
		},
		methods: {
			// // 窗口大小事件
			// resizeListener() {
			//   this.linehart.resize();
			// },
			// cards根据index或其他条件渲染不同背景
			getBackgroundColor(v) {
			  switch (v.type) {
				case 'typeA':
				  return '#ffedea';
				case 'typeB':
				  return '#f8f7ff';
				case 'typeC':
				  return '#edfffc';
				default:
				  return '#f2ffff';
			  }
			}
		},
		// 计算属性
		computed: {
		
		},
		
	};
</script>

<style lang="less" scoped>
	/deep/ .el-row{
		flex-wrap: wrap;
	}
	/deep/ .el-card:hover{
		cursor: pointer;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
		// background-color: #bdffec;
	}
	.home-box {
	
		width: 100%;
		height: 100%;
		overflow: auto;

		.main{
			.header-title{
				display: flex;
				background-color: #fff;
				.header-icon {
					height: 60px;
					padding: 12px;
					display: flex;
					align-items: center;
					.img{
						width: 40px;
						height: 40px;
						
						img{
							width: 100%;
							height: 100%;border-radius: 50%;
						}
					}
				}
				.main-header-left{
					background-color: #f8f8f8;
					.main-header-title{
						margin-top: 12px;
						background-color: #fff;
						.perjects{
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-wrap: wrap;
							li{
								list-style: none;
								float: left;
								width: 288px;
								margin: 8px;
								border: 1px solid #dadada;
								display: flex;
								flex-direction: column;
								align-items: center;
							}
						}
					}
				}
			}

			.all{
				display: flex;
				width: 100%;
				.left{
					flex: 3;
					.header-title{
						background-color: #fff;
						display: flex;
						flex-direction: column;
					}
					// eachrts盒子
					.linehart-box {
					  flex: 1;
					  display: flex;
					  justify-content: center;
					  background-color: white;
					  margin: 15px 0;
					  padding: 20px 0;
					  min-height: 350px;
					}
					.main-left {
						padding: 8px;
						display: flex;
						align-items: center;
						background-color: #fff;
						justify-content: space-around;
						font-size: 18px;
						color: #fff;
						font-weight: bold;
						flex-wrap: wrap;
						div {
							margin: 2px 0;
							width: 168px;
							display: flex;
							flex-direction: column;
							align-items: center;
							span{
								margin-top: 4px;
							}
						}
					}
				}
				.right{
					flex: 1;
					padding: 0 12px;
					.allRight{
						background-color: #fff;
						padding: 20px;
						.ll{
							.useModel{
								margin-top: 12px;
								list-style-type: none;
								display: flex;
								justify-content: space-around;
								flex-wrap: wrap;
								li{
									width: 88px;
									height: 48px;
									margin: 8px;
									display: flex;
									justify-content: center;
									align-items: center;
									flex-direction: column;
								}
								li:hover{
									cursor: pointer;
									background-color: #dadada;
								}
							}
						}
					}
					.img{
						img{
							width: 100%;
							height: 100%;
						}
					}
					// 公告
					.notice{
						margin-top: 8px;
						background-color: #fff;
						padding: 12px;
						display: flex;
						flex-direction: column;
						.noticeA{
							display: flex;
							justify-content: space-between;
							height: 40px;
						}
						.noticeB{
							display: flex;
							align-items: center;
							span{
								font-size: 12px;
								margin-left: 12px;
							}
						}
					}
					// 帮助文档
					.helpDocument{
						margin-top: 8px;
						background-color: #fff;
						padding: 12px;
						display: flex;
						flex-direction: column;
						.helpDocumentA{
							display: flex;
							justify-content: space-between;
							height: 40px;
						}
						.helpDocumentB{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							justify-content: space-between;
							span{
								font-size: 12px;
								margin-left: 12px;
							}
							li{
								width: 148px;
								height: 40px;
								line-height: 40px;
								list-style: none;
								span{
									font-weight: 300;
								}
							}
							li:hover{
								cursor: pointer;
								background-color: #d9f1ff;
								span{
									font-weight: bold;
								}
							}
						}
					}
				}
			}
			
		}
	}
</style>